<template>
	<view>
		<!-- 顶部刷新按钮 -->
		<view class="refresh-btn" @tap="refresh">
			<uni-icons type="refresh" size="20" color="#666"></uni-icons>
			<text class="text-sm">刷新</text>
		</view>
		<!-- 收银台 -->
		<view class="edgeInsetTop"></view>
		<view class="wanl-pay">
			<view class="price-box">
				<text class="text-df">{{order_no}}</text>
				<text class="wanl-pip text-price margin-top-sm">{{price}}</text>
			</view>
			<view class="list-box">
				<view class="item" v-for="(item, index) in payList" :key="index">
					<text :class="'wlIcon-'+ item.type +'-pay'"></text>
					<view class="action">
						<text class="title wanl-pip">{{item.name}}</text>
						<view v-if="item.type == 'balance'">

							<text v-if="isbalance">可用余额 ￥{{balance/100}}</text>
							<text v-else>余额不足，可用余额 ￥{{balance/100}}</text>
						</view>
						<view v-else>{{item.describe}}</view>
					</view>
					<view class="radio text-xxl" v-if="item.state" @tap="onSelect(index)">
						<text v-if="item.select" class="wlIcon-xuanze-danxuan wanl-orange"></text>
						<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
					</view>
					<view class="radio text-xxl" v-else>
						<text class="wlIcon-xuanze-danxuan wanl-gray-light"></text>
					</view>
				</view>
			</view>
			<view v-if="disabled">
				<button class="mix-btn wanl-bg-redorange"> <text
						class="wlIcon-jiazai wlIconfont-spin margin-right-xs"></text>正在支付中... </button>
			</view>
			<view v-else>
				<button v-if="payNum == 1" class="mix-btn wanl-bg-redorange" @tap="confirm()"> 确认支付 </button>
				<button v-else class="mix-btn wanl-bg-redorange" @tap="confirm()"> 合并支付 </button>
			</view>
			<view class="footer text-center">
				<view class="text-sm" v-if="order_pay_no">{{order_type === 'groups' ? '拼团':''}}交易号：{{order_pay_no}}
				</view>
				<!-- <view> © 万联支付</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				token: '',
				disabled: false,
				price: '0.00',
				isbalance: true,
				order_type: 'goods',
				order_no: '',
				order_pay_no: '',
				payNum: 1, // 支付方式 独立支付-合并支付
				payList: [],
				channel: 'Wxpay',
				balance: 0,
			}
		},
		computed: {
			...mapState(['user'])
		},
		watch: {
			price(val, newval) {
				console.log(val)
				console.log(this.$store.state.user.balance)
				if (val <= parseFloat(this.$store.state.user.balance / 100)) {
					this.isbalance = true;
					this.getPayment();
				}
			}
		},
		async onShow() {
			await uni.request({
				url: '/api/user/getUserInfo',
				data: {
					token: uni.getStorageSync("wanlshop:user").token,
				},
				method: 'POST',
				success: res => {
					console.log(res.data.balance)
					this.balance = res.data.balance;
					// console.log(this.balance)
					this.$store.commit('user/setUserInfo', {
						balance: res.data.balance
					});
					// 获取支付列表
					this.getPayment();
				}
			});
		},
		async onLoad(option) {
			console.log(option)

			if (option.data) {

				var sum = 0,
					ship_price = 0,
					freight_price = 0,
					data = JSON.parse(option.data),
					order_ids = [];
				console.log(9999)

				// alert(data.length)
				// alert(JSON.stringify(data[0].freight_price))
				// alert(JSON.stringify(data))
				if (data.length <= 1) {
					this.price = this.$wanlshop.bcadd(data[0].good_price, data[0].ship_price);
					this.price = this.$wanlshop.bcadd(this.price, data[0].freight_price);
					this.order_type = 'good';
					this.order_no = `${data[0].type == 'groups' ? '拼团':''}订单号：${data[0].order_no}`;
					this.order_pay_no = data[0].order_num;
					this.order_id = data[0].order_id;
				} else {
					console.log(data)
					data.forEach(item => {
						sum = this.$wanlshop.bcadd(sum, item.good_price);

						this.order_id = item.order_id;
						ship_price = item.ship_price
						freight_price = item.freight_price
					});
					this.price = this.$wanlshop.bcadd(sum, ship_price);
					this.price = this.$wanlshop.bcadd(this.price, freight_price);
					// this.order_id = order_ids;
					this.payNum = data.length;
					this.order_no = '合并支付 ' + data.length + '个订单';
				}
				// this.token = option.token;

				this.price = option.amount

				console.log(this.order_id)
			} else {
				console.log('非法访问');
			}
		},
		methods: {
			// 新增刷新方法
			async refresh() {
				uni.showLoading({
					title: '刷新中'
				});
				try {

					// 重新获取用户信息
					await uni.request({
						url: '/api/user/getUserInfo',
						method: 'POST',
						data: {
							token: uni.getStorageSync("wanlshop:user").token,
						},
						success: (res) => {
							this.balance = res.data.balance;
							this.$store.commit('user/setUserInfo', {
								balance: res.data.balance
							});
						}
					});

					// 重新获取支付方式
					this.getPayment();
					uni.hideLoading();
					uni.showToast({
						title: '刷新成功',
						icon: 'success'
					});
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: '刷新失败',
						icon: 'none'
					});
				}
			},
			getPayment() {
				let method = 'wap';
				// #ifdef APP-PLUS
				method = 'app';
				// #endif
				// #ifdef MP-BAIDU
				method = 'mini';
				// #endif
				// #ifdef MP-WEIXIN
				method = 'miniapp';
				// #endif
				// #ifdef MP-ALIPAY
				method = 'mini';
				// #endif
				// #ifdef MP-QQ
				method = 'mini';
				// #endif



				this.payList = [{
					name: '余额支付',
					describe: '',
					type: 'balance',
					method: 'balance',
					state: this.isbalance ? true : false, // 是否可用
					select: this.isbalance ? true : false // 是否选中
				}];
				// #ifdef H5
				if (this.$jssdk.isWechat()) {
					this.payList.push({
						name: '公众号支付',
						describe: '推荐使用公众号支付',
						type: 'wechat',
						method: 'mp',
						state: true,
						select: this.isbalance ? false : true
					});
				} else {
					this.payList.push({
						name: '支付宝',
						describe: '',
						type: 'alipay',
						method: method,
						state: true,
						select: false
					}, {
						name: '微信支付',
						describe: '推荐使用微信支付',
						type: 'wechat',
						method: method,
						state: true,
						select: this.isbalance ? false : true
					});
				}
				// #endif
				// #ifndef H5
				uni.getProvider({
					service: "payment",
					success: (e) => {
						e.provider.map((value) => {
							if (value == 'alipay') {
								this.payList.push({
									name: '支付宝',
									describe: '',
									type: value,
									method: method,
									state: true,
									select: false
								});
							} else if (value == 'wxpay') {
								this.payList.push({
									name: '微信支付',
									describe: '推荐使用微信支付',
									type: 'wechat',
									method: method,
									state: true,
									select: this.isbalance ? false : true
								});
							} else if (value == 'baidu') {
								this.payList.push({
									name: '百度收银台',
									describe: '',
									type: value,
									method: method,
									state: true,
									select: false
								});
							}
							// else if(value == 'appleiap'){
							// 	this.payList.push({name: 'Apple支付',describe: '',type: 'apple',method: method,state: true,select: false});
							// }
						})
					}
				});
				// #endif
			},
			//确认支付
			confirm() {
				let data = null;



				console.log(this.disabled)
				if (this.disabled) {
					return;
				}
				this.payList.map((value, index, array) => {
					if (value.select) {
						data = value;
					} else {
						return;
					}
				});
				// 判断支付是否存在
				if (!data) {
					uni.showModal({
						content: "请选择支付方式",
						showCancel: false
					});
					return;
				} else {
					this.disabled = true;
					// 获取小程序code
					// #ifdef MP
					uni.login({
						success: (e) => {
							this.wanlPay(data, e.code);
						},
						fail: (e) => {
							uni.showModal({
								content: "无法获取微信code,原因为: " + e.errMsg,
								showCancel: false
							})
						}
					})
					// #endif
					// #ifndef MP
					// 如果是公众号获取code
					this.wanlPay(data);
					// #endif
				}
			},
			async wanlPay(data, code = null) {
				console.log(JSON.stringify(data.type))

				if (this.price > this.balance && data.type == 'balance') {
					uni.showToast({
						title: '余额不足，无法支付'
					})
					return
				}


				await uni.request({
					url: '/payment/Pay/getOrderSign',
					method: 'POST',
					data: {
						order_type: data.method, //支付方式
						type: data.type,
						method: data.method,
						code: code,
						order_id: this.order_id,
						token: uni.getStorageSync("wanlshop:user").token
					},
					success: res => {

						console.log(res)
						// 余额支付/小程序支付
						switch (data.type) {
							case 'balance':
								this.$store.commit('user/setUserInfo', {
									balance: this.$wanlshop.bcsub(this.$store.state.user.balance,
										this.price)
								});
								this.paySuccess();
								break;
							case 'wechat':
								// 微信 H5支付
								if (data.method == 'wap') {
									setTimeout(() => {
										uni.showModal({
											content: '请确认微信支付是否已完成',
											confirmText: '已完成',
											cancelText: '重新支付',
											success: response => {
												if (response.confirm) {
													this.paySuccess();
												} else if (response.cancel) {
													this.confirm();
												}
											}
										});
									}, 2000);
									// 异步查询是否支付成功
									window.location.href = res.data;
									// 微信 APP支付
								} else if (data.method == 'app') {
									console.log(res.data.payOrder)

									uni.requestPayment({
										provider: 'wxpay',
										orderInfo: res.data.payOrder,
										success: (e) => {
											console.log("success", e);
											this.paySuccess();
										},
										fail: (e) => {
											this.$wanlshop.msg('支付失败，取消支付');

											setTimeout(() => {
												uni.switchTab({
													url: 'pages/user'
												})
												// uni.redirectTo({
												// 	url:'/pages/user/order/order?state=1'
												// })
											}, 2000);


											// uni.showModal({
											//     content: "支付失败,原因为: " + e.errMsg,
											//     showCancel: false
											// })
										},
										complete: () => {
											this.disabled = false;
										}
									})
									// 微信 小程序支付
								} else if (data.method == 'miniapp') {
									console.log(888)
									uni.requestPayment({
										appId: res.data.appId,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										paySign: res.data.paySign,
										signType: res.data.signType,
										timeStamp: res.data.timeStamp,
										success: (e) => {
											this.paySuccess();
										},
										fail: (e) => {
											this.$wanlshop.msg('支付失败，取消支付');
											setTimeout(() => {
												uni.switchTab({
													url: 'pages/user'
												})
												// uni.redirectTo({
												// 	url:'/pages/user/order/order?state=1'
												// })
											}, 2000);
											// uni.showModal({
											//     content: "支付失败,原因为: " + e.errMsg,
											//     showCancel: false
											// })
										}
									})
									// 微信 公众平台支付
								} else if (data.method == 'mp') {
									this.$jssdk.wxpay({
										data: res.data,
										success: e => {
											this.paySuccess();
										},
										fail: err => {
											if (err.errMsg == "chooseWXPay:ok") {
												this.$wanlshop.msg('支付成功');
											} else if (err.errMsg == "chooseWXPay:cancel") {
												this.$wanlshop.msg('支付失败，取消支付');
											} else if (err.errMsg == "chooseWXPay:fail") {
												this.$wanlshop.msg('支付失败');
											}
										}
									})
								}
								break;
							case 'alipay':
								if (data.method == 'wap') {
									this.disabled = false;
									if (this.order_type === 'goods') {
										this.$store.commit('statistics/order', {
											pay: this.$wanlshop.bcsub(this.$store.state.statistics
												.order.pay, this.payNum),
											delive: this.$wanlshop.bcadd(this.$store.state
												.statistics.order.delive, this.payNum)
										});
									}
									document.write(res.data);
								} else if (data.method == 'app') {
									// alert(1)
									console.log(88)
									console.log(res.data)
									uni.requestPayment({
										provider: 'alipay',
										orderInfo: res.data.payOrder,
										success: (e) => {
											console.log("success", e);
											this.paySuccess();
										},
										fail: (e) => {
											console.log(e)
											// this.$wanlshop.msg('支付失败，取消支付');
											// setTimeout(() => {
											// 	uni.redirectTo({
											// 		url:'/pages/user/order/order?state=1'
											// 	})
											// }, 2000);
											uni.showModal({
												content: "支付失败,原因为: " + e.errMsg,
												showCancel: false
											})
										},
										complete: () => {
											this.disabled = false;
										}
									})
								}
								break;
						}
					}
				});
			},
			onSelect(key) {
				this.payList.map((value, index, array) => {
					if (index == key) {
						value.select = !value.select;
					} else {
						value.select = false;
					}
				});
			},
			// 支付成功
			paySuccess() {
				this.disabled = false;
				if (this.order_type === 'goods') {
					this.$store.commit('statistics/order', {
						pay: this.$wanlshop.bcsub(this.$store.state.statistics.order.pay, this.payNum),
						delive: this.$wanlshop.bcadd(this.$store.state.statistics.order.delive, this.payNum)
					});
				}
				this.$wanlshop.to(`/pages/page/success?type=pay&order_type=${this.order_type ? this.order_type:'goods'}`);
			}
		}
	}
</script>

<style>
	/* 新增刷新按钮样式 */
		.refresh-btn {
			position: fixed;
			right: 20rpx;
			top: 40rpx;
			z-index: 999;
			display: flex;
			align-items: center;
			padding: 8rpx 20rpx;
			background: #fff;
			border-radius: 40rpx;
			box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.1);
			transition: all 0.3s;
		}
		
		.refresh-btn:active {
			//transform: rotate(360deg);
			background: #f5f5f5;
		}
		
		.refresh-btn text {
			margin-left: 8rpx;
			color: #666;
		}
	
	page {
		background-color: white;
	}

	radio-group {
		display: block;
	}
</style>
